<template>
  <div class="tools-detail-page">
    <ToolCard :tools="displayInfo.list" />
  </div>
</template>

<script setup lang="ts">
import type { ToolList } from '~/types/tools'

/**
 * 工具详情页面脚本
 * 根据URL参数显示特定类型的工具详情信息
 */

// 获取当前路由对象
const route = useRoute()

// 当前页面数据
const displayInfo = ref<ToolList>({
  list: [],
  total: 0,
  title: 'AI工具',
  description: 'AI工具',
  categoryId: 0
})

// 从路由参数中获取工具类型ID
const { categoryId } = route.params

// 工具列表数据 - 使用POST请求发送JSON数据
// 设置 all: true 参数，将查询所有数据，忽略pageSize和pageNum
const { success, data: allData } = await $fetch('/api/tools-with-tags', {
  method: 'POST',
  body: {
    categoryIds: [+(categoryId as string)],
    all: true // 查询所有数据，不分页

  }
})

if (success && allData && allData.length > 0 && allData[0]) {
  displayInfo.value = allData[0]
}

/**
 * 设置页面头部信息
 * 动态设置页面标题，包含工具类型信息
 */
useHead({
  title: displayInfo.value.title
})

/**
 * 共享页面标题到全局状态
 * 这样其他组件（如Breadcrumb）可以访问这个标题
 */
const pageTitle = useState('pageTitle', () => displayInfo.value.title)
const pageDescription = useState('pageDescription', () => '探索AI工具的无限可能')

// 更新全局状态
pageTitle.value = displayInfo.value.title

pageDescription.value = displayInfo.value.description
</script>

<style lang="less" scoped>
.tools-detail-page {
  padding: 24px 0;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .tools-detail-page {
    padding: 15px;
  }
}
</style>